<template>
   <div style="height: 600px; width: 100%;">
       <div class="send-top">
           <div style="margin-left:300px; font-weight:bold; padding-top:30px;font-size:20px;">问卷链接与二维码</div>
            <div class="qrcode">
                <div id="qroode" class="qrconde" ref="qrCodeDiv"></div>
            </div>
            <el-input
                placeholder="请输入内容"
                v-model="url"
                style="width: 300px; margin-top: 30px; margin-left: 50px">
                </el-input>
                <el-button type="primary" style="width: 70px; margin-left: 10px"  class="tag-read" :data-clipboard-text="url" @click="copy" >复制</el-button>
                <el-button type="warning" style="width: 70px; margin-left: 10px">打开</el-button>
                <!--
                <el-button type="primary" style="width: 120px;position:relative;left:-160px;top:140px;">下载二维码</el-button>
                -->
                <p v-if="questionnaire.publish_time == null" style="margin-top: 15px; margin-left: 300px">
                    该问卷还未发布，请先发布
                </p>
        </div>
        <!--
        <el-divider></el-divider>
        <div class="send-main">
              <div style="font-weight:bold; margin-top:30px; font-size:20px;">网站嵌入</div>
            <el-input
                placeholder="请输入内容"
                v-model="code"
                style="width: 700px; margin-top: 50px;">
            </el-input><br>
            <el-button type="primary" style="width: 150px; margin-top: 20px"  class="tag-read2" :data-clipboard-text="code" @click="copy2" >复制</el-button>
        </div>
        -->
   </div>
</template>

<script>

import QRcode from "qrcodejs2"
import html2canvas from "html2canvas"
import $ from 'jquery'
import Clipboard from 'clipboard'

export default {
    data(){
        return{
            uid:'',
            url:'',
            code:'',
        }
    },
    props:['questionnaire'],
    mounted(){
        this.uid=this.$store.state.uid;
        this.initData(this.questionnaire.id);
    },
    methods:{
        initData(){
            let qid = this.questionnaire.id*1234;
            var encode_str=this.$UrlEncode.encode(JSON.stringify(qid));
            this.url='http://8.130.48.144:8888/final?qid='+encode_str;
            this.code="<iframe height=\"1200\" width=\"800\" src=\""+this.url+"frameborder=\"0\" allowfullscreen></iframe>"
            new QRcode(this.$refs.qrCodeDiv,{
                text:this.url,
                //text为转换为二维码的文本，可以是所有东西：图片、文本、电话、链接等等
                width:100,     //生成二维码的宽度
                height:100,     //生成二维码的高度
                colorDark:'#333333',   // 二维码颜色
                colorLight:'#fff',  //二维码背景颜色
                // correctLevel:QRCode.correctLevel.L,   //容错率 ，L/M/H
            })
            html2canvas(this.$refs.qrCodeDiv, {
                backgroundColor: null,
                width: 300,
                height: 300
            }).then(canvas => {
                var imgData = canvas.toDataURL('image/jpeg')  //这里转为图片方式 `[base64转图片并显示](https://blog.csdn.net/weixin_45527702/article/details/117324946)`
                this.imgData = imgData   //this.imgData是需要自己在data中定义，进而来接参
            })
        },   
        
        copy(){
            var clipboard = new Clipboard('.tag-read')
            clipboard.on('success', e => {
                //alert('复制成功')
                console.log(e)
                //  释放内存
                clipboard.destory()
                return;
            }).then(
                alert('复制成功')
            )
            clipboard.on('error', e =>{
                // 不支持复制
             //   alert('该浏览器不支持复制')
                console.log(e)
                // 释放内存
                clipboard.destory()
            })
        },
        copy2(){
            var clipboard = new Clipboard('.tag-read2')
            clipboard.on('success', e => {
                //alert('复制成功')
                console.log(e)
                //  释放内存
                clipboard.destory()
                return;
            }).then(
                alert('复制成功')
            )
            clipboard.on('error', e =>{
                // 不支持复制
             //   alert('该浏览器不支持复制')
                console.log(e)
                // 释放内存
                clipboard.destory()
            })
        }
    },
    watch:{
        questionnaire(){
            $(".qrconde").html("");
            this.initData(this.questionnaire.id);
        }
    }
}

</script>
<style scoped>
.send-top{
    width: 100%;
    padding-top: 60px;
    padding-bottom: 70px;
    text-align: left;
}
.send-qr{
    width: 100px;
    height: 100px;
    background-color: red;
}
.qrcode{
    width: 120px;
    float: left;
    height: 120px;
    border: solid 1px gainsboro;
    margin-left: 100px;
}
#qroode{ 
    width: 100px; 
    height: 100px; 
    margin: auto; 
    margin-top: 12px;
}
</style>